<template>
  <el-card shadow="never">
    <template #header>
      <div class="my--1.5 flex flex-row items-center justify-between">
        <CardTitle title="项目概览" />
        <!-- 查询条件 -->
        <ShortcutDateRangePicker @change="handleTimeRangeChange" />
      </div>
    </template>
    <div class="min-w-225 py-1.75" v-loading="loading">
      <div class="relative h-24 flex">
        <div class="h-full w-75% bg-blue-50 <lg:w-35% <xl:w-55%">
          <div class="ml-15 h-full flex flex-col justify-center">
            <div class="font-bold">
              新增项目数量：{{ projectAnalyseData?.projectCount || 0 }}
            </div>
            <div class="mt-2 text-3.5">
<!--              环比增长率：{{-->
<!--                calculateRelativeRate(-->
<!--                  analyseData?.comparison?.value?.registerUserCount,-->
<!--                  analyseData?.comparison?.reference?.registerUserCount-->
<!--                )-->
<!--              }}%-->
            </div>
          </div>
        </div>
        <div
          class="trapezoid1 ml--38.5 mt-1.5 h-full w-77 flex flex-col items-center justify-center bg-blue-5 text-3.5 text-white"
        >
          <span class="text-6 font-bold">{{ projectAnalyseData?.checkRecordCount || 0 }}</span>
          <span>新增考核</span>
        </div>
      </div>
      <div class="relative h-24 flex">
        <div class="h-full w-75% flex bg-cyan-50 <lg:w-35% <xl:w-55%">
          <div class="ml-15 h-full flex flex-col justify-center">
            <div class="font-bold">
              新增检查备忘录数量：{{ projectAnalyseData?.inspectionMemoCount || 0 }}
            </div>
            <div class="mt-2 text-3.5">
<!--              环比增长率：{{-->
<!--                calculateRelativeRate(-->
<!--                  analyseData?.comparison?.value?.visitUserCount,-->
<!--                  analyseData?.comparison?.reference?.visitUserCount-->
<!--                )-->
<!--              }}%-->
            </div>
          </div>
        </div>
        <div
          class="trapezoid2 ml--28 mt-1.7 h-25 w-56 flex flex-col items-center justify-center bg-cyan-5 text-3.5 text-white"
        >
          <span class="text-6 font-bold">{{ projectAnalyseData?.areaCount || 0 }}</span>
          <span>新增考核区域</span>
        </div>
      </div>
      <div class="relative h-24 flex">
        <div class="w-75% flex bg-slate-50 <lg:w-35% <xl:w-55%">
          <div class="ml-15 h-full flex flex-row gap-x-16">
            <div class="flex flex-col justify-center">
              <div class="font-bold">
                新增批次数量：{{ projectAnalyseData?.assessmentBatchCount || 0 }}
              </div>
              <div class="mt-2 text-3.5">
<!--                环比增长率：{{-->
<!--                  calculateRelativeRate(-->
<!--                    analyseData?.comparison?.value?.rechargeUserCount,-->
<!--                    analyseData?.comparison?.reference?.rechargeUserCount-->
<!--                  )-->
<!--                }}%-->
              </div>
            </div>
            <div class="flex flex-col justify-center">
<!--              <div class="font-bold">客单价：{{ fenToYuan(analyseData?.atv || 0) }}</div>-->
            </div>
          </div>
        </div>
        <div
          class="trapezoid3 ml--18 mt-3.25 h-23 w-36 flex flex-col items-center justify-center bg-slate-5 text-3.5 text-white"
        >
          <span class="text-6 font-bold">{{ analyseData?.orderUserCount || 0 }}</span>
          <span>访客</span>
        </div>
      </div>
    </div>
  </el-card>
</template>


<script lang="ts" setup>
import * as MemberStatisticsApi from '@/api/mall/statistics/member'
import dayjs from 'dayjs'
import { calculateRelativeRate, fenToYuan } from '@/utils'
import { MemberAnalyseRespVO } from '@/api/mall/statistics/member'
import { CardTitle } from '@/components/Card'
import { StatisticsApi } from "@/api/project/statistics";

/** 会员概览卡片 */
defineOptions({ name: 'MemberFunnelCard' })

const loading = ref(true) // 加载中
const analyseData = ref<MemberAnalyseRespVO>() // 会员分析数据
const projectAnalyseData = ref(null)

/** 查询会员概览数据列表 */
const handleTimeRangeChange = async (times: [dayjs.ConfigType, dayjs.ConfigType]) => {
  loading.value = true
  // 查询数据
  analyseData.value = await MemberStatisticsApi.getMemberAnalyse({ times })
  await getProjectAnalyse(times)
  loading.value = false
}

const getProjectAnalyse = async (times: [dayjs.ConfigType, dayjs.ConfigType]) => {
  projectAnalyseData.value = await StatisticsApi.getProjectAnalyse({ times })
  console.log("projectAnalyseData", projectAnalyseData)
}
</script>


<style lang="scss" scoped>
.trapezoid1 {
  transform: perspective(5em) rotateX(-11deg);
}

.trapezoid2 {
  transform: perspective(7em) rotateX(-20deg);
}

.trapezoid3 {
  transform: perspective(3em) rotateX(-13deg);
}
</style>
